<template>
  <div class="login">
    <div class="logoContent">
      <div class="loginLeft">
        <img :src="require('@/assets/logo-left.png')" />
      </div>
      <div class="loginInfo">
        <img :src="require('@/assets/login-logo.png')" class="logo" />
        <span> 易拉罐 </span>
        <el-form :model="loginForm" ref="loginFormRef" :rules="loginRules" label-width="80">
          <el-form-item label="账户" prop="username">
            <el-input placeholder="账户" ref="username" v-model="loginForm.username">
              <i slot="prefix" class="el-input__icon iconfont username"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input placeholder="密码" ref="password" v-model="loginForm.password" :key="passwordType" :type="passwordType">
              <i slot="prefix" class="el-input__icon iconfont password"></i>
            </el-input>
            <span
                class="show-pwd"
                @click="showPwd"
            >
          </span>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="login">登陆</el-button>
      </div>
    </div>
    <div class="footer">
      安骏物流有限公司
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Form as ElForm, Input } from 'element-ui'
import {setToken} from "@/utils/auth";

@Component({
  name: 'Login'
})
export default class extends Vue {

  private loginForm = {
    username: 'admin',
    password: '111111'
  }

  private loginRules = {
    username: this.$formValidator.empty('用户名'),
    password: this.$formValidator.empty('密码')
  }

  private passwordType = 'password'

  mounted() {
    if (this.loginForm.username === '') {
      (this.$refs.username as Input).focus()
    } else if (this.loginForm.password === '') {
      (this.$refs.password as Input).focus()
    }
  }


  private showPwd() {
    if (this.passwordType === 'password') {
      this.passwordType = ''
    } else {
      this.passwordType = 'password'
    }
    this.$nextTick(() => {
      (this.$refs.password as Input).focus()
    })
  }

  private login() {
    (this.$refs.loginFormRef as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        this.$api.common.loginApi('',this.loginForm).then(({data})=>{
          const { token } = data;
          setToken(token);
          localStorage.setItem(
              "userInfo",
              JSON.stringify({name:this.loginForm.username})
          );
          this.$router.push({
            path:  '/'
          }).catch(err => {
            console.warn(err)
          })
        })
        setToken('1234567890jkllollo');
        localStorage.setItem(
            "userInfo",
            JSON.stringify({name:this.loginForm.username})
        );
        this.$router.push({
          path:  '/home'
        }).catch(err => {
          console.warn(err)
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/logo-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  .logoContent {
    width: 800px;
    height: 450px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    overflow: hidden;
    .loginLeft {
      width: 400px;
      height: 100%;
      background-color: #e5eaff;
      img {
        width: 410px;
        height: 100%;
      }
    }
    .loginInfo {
      padding: 0 50px;
      flex: 1;
      text-align: center;
      .logo {
        height: 80px;
        display: block;
        margin: 25px auto 0;
      }
      & > span {
        width: 100%;
        display: block;
        text-align: center;
        font-size: 22px;
        color: #302d30;
        margin: 20px 0 10px 0;
      }
      & > .el-input {
        margin-top: 20px;
        height: 38px;
        line-height: 38px;
      }
      & > .el-button--primary {
        background-color: #5c6be8;
        border-color: #5c6be8;
        width: 100%;
        border-radius: 6px;
        margin-top: 20px;
      }
    }
  }
  .footer{
    position: fixed;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
  }
}
</style>
